<template>
  <div ref="print" style="width:100%; margin: 0 auto;" v-show="isPreview">
    <table>
      <tr>
        <td align="center" height="24" style="font-size: 24px;">货运单</td>
      </tr>
    </table>

    <table class="bor fs12 tc">
      <tr>
        <td colspan="3">生产基地</td>
        <td colspan="3">需求部门</td>
      </tr>

      <tr height="26">
        <td colspan="2">基础信息</td>
        <td width="10%">附件</td>
        <td width="10%">数量</td>
        <td width="10%">附件</td>
        <td width="10%">数量</td>
      </tr>

      <tr height="26">
        <td rowspan="2" width="10%">货运编号</td>
        <td rowspan="2">{{ data.shipmentOrderNo }}</td>
        <td width="10%">补胎液</td>
        <td width="10%">{{ 1 * data.orderList.length }}</td>
        <td width="10%"></td>
        <td width="10%"></td>
      </tr>

      <tr height="26">
        <td width="10%">拖车钩</td>
        <td width="10%">{{ 1 * data.orderList.length }}</td>
        <td width="10%"></td>
        <td width="10%"></td>
      </tr>

       <tr height="26">
        <td width="10%">发车时间</td>
        <td>{{ this.data.carrierDate }}</td>
        <td width="10%">充气泵</td>
        <td width="10%">{{ 1 * data.orderList.length }}</td>
        <td width="10%"></td>
        <td width="10%"></td>
      </tr>

      <tr height="26">
        <td width="10%">发车基地</td>
        <td>{{ this.data.carrierBase }}</td>
        <td width="10%">合格证</td>
        <td width="10%">{{ 1 * data.orderList.length }}</td>
        <td width="10%"></td>
        <td width="10%"></td>
      </tr>

      <tr height="26">
        <td width="10%">到达时间</td>
        <td></td>
        <td width="10%">使用说明</td>
        <td width="10%">{{ 1 * data.orderList.length }}</td>
        <td width="10%"></td>
        <td width="10%"></td>
      </tr>

      <tr height="26">
        <td width="10%">经销商名称</td>
        <td>{{ data.dealerName }}</td>
        <td width="10%">三包手册</td>
        <td width="10%">{{ 1 * data.orderList.length }}</td>
        <td width="10%"></td>
        <td width="10%"></td>
      </tr>

      <tr height="26">
        <td width="10%">收货人</td>
        <td>{{ data.linkMan }}</td>
        <td width="10%"></td>
        <td width="10%"></td>
        <td width="10%"></td>
        <td width="10%"></td>
      </tr>

      <tr height="26">
        <td width="10%">联系电话</td>
        <td>{{ data.linkPhone }}</td>
        <td width="10%"></td>
        <td width="10%"></td>
        <td width="10%"></td>
        <td width="10%"></td>
      </tr>

      <tr height="26">
        <td width="10%">收货地址</td>
        <td>{{ data.address }}</td>
        <td width="10%"></td>
        <td width="10%">验收签字</td>
        <td colspan="2"></td>
      </tr>

    </table>

    <table>
      <tr height="24">
        <td align="center">整车明细</td>
      </tr>
    </table>

    <table class="bor fs12 tc">
      <tr height="26">
        <td rowspan="2" width="5%">序号</td>
        <td rowspan="2" width="10%">车型</td>
        <td rowspan="2" width="15%">VIN</td>
        <td rowspan="2" width="10%">颜色</td>
        <td rowspan="2" width="15%">电机号</td>
        <td width="15%">电池源编号</td>
        <td width="10%">电池外观</td>
        <td rowspan="2" width="10%">电池厂家</td>
        <td rowspan="2" width="10%">备注</td>
      </tr>

      <tr height="26">
        <td width="10%">左电池号</td>
        <td width="10%">底部外观</td>
      </tr>

      <tr height="26" v-for="(value,index) in orderListData">
        <td width="5%">{{ index+1 }}</td>
        <td width="10%">{{ value.modelName }}</td>
        <td width="15%">{{ value.vin }}</td>
        <td width="10%">{{ value.colorName }}</td>
        <td width="15%">{{ value.motorNo }}</td>
        <td width="15%">{{ value.batteryNo }}</td> 
        <td width="10%"></td>
        <td width="10%">{{ value.batteryOem }}</td>
        <td width="10%"></td>
      </tr>

       <tr height="26" v-for="x in blankLines" :key="x">
        <td width="5%" > {{ x+dataLines }}</td>
        <td width="10%"></td>
        <td width="15%"></td>
        <td width="10%"></td>
        <td width="15%"></td>
        <td width="15%"></td> 
        <td width="10%"></td>
        <td width="10%"></td>
        <td width="10%"></td>
      </tr>

      <tr>
        <td align="left" colspan="9" height="30">
          备注：1.生产基地、整车部分为生产基地填写；需求部门、整车验收情况为需求部门验收后填写
        </td>
      </tr>
      <tr>
        <td align="left" colspan="9" height="30">
          2.车辆交接时，需检查车辆外观、电池外观是否完好、无划伤、掉漆等问题，附件和配件是否齐全完好，验收合格后方可签收
        </td>
      </tr>
      <tr>
        <td align="left" colspan="9" height="30">
          3.随车工具包含：三角警示牌、前脱钩【附件为0或为空的都不在配置中】
        </td>
      </tr>
      <tr>
        <td align="left" colspan="6" height="30">
          4.物料公司司机已阅读并知悉《告知书》内提醒的相关事项
        </td>
        <td align="left" colspan="3" >司机签字：</td>
      </tr>
     
      <tr height="30">
        <td colspan="2">驾驶员姓名</td>
        <td >{{ data.carrierDriver }}</td>
        <td>驾驶员电话</td>
        <td colspan="2">{{ data.carrierDriverPhone }}</td>
        <td>车牌号</td>
        <td colspan="2">{{ data.trailerBrand }}</td>
      </tr>

      <tr height="30">
        <td colspan="2">身份证号</td>
        <td >{{ data.carrierDriverIdCard }}</td>
        <td>物流公司</td>
        <td colspan="2">{{ data.carrierCompany }}</td>
        <td>板次</td>
        <td colspan="2">{{ data.frequency }}</td>
      </tr>

    </table>

    <table>
      <tr height="30">
        <td>基地签字：</td>
        <td></td>
        <td>物流签字：</td>
        <td></td>
        <td>收货签字：</td>
        <td></td>
      </tr>
    </table>
  </div>
</template>

<script>
/**
 * @Author: 焦质晔
 * @Date: 2019/4/22
 * @Last Modified by:   焦质晔
 * @Last Modified time: 2019-04-22 15:45:09
 **/
import moment from 'moment';

export default {
  name: 'templateShipmentOrder',
  props: {
    data: {
      type: Object,
      required: true,
      default() {
        return {};
      }
    },
    isPreview: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      nowTime: moment().format('YYYY-MM-DD HH:mm:ss'),
      orderListData: this.data.orderList,
      blankLines: 15 - Number(this.data.orderList.length),
      dataLines: this.data.orderList.length
    };
  },
  computed: {
    // totalPrice() {
    //   return this.data.items.reduce((prev, curr) => {
    //     return curr.ckdj * curr.ckdj + prev;
    //   }, 0);
    // }
  },
  methods: {
    fillInToDom() {
      this.isPreview = true;
    }
  },
  mounted() {
    console.log('传入数据',this.data);
    console.log('网格数据',this.orderListData);
    console.log('数据行',this.dataLines);
    console.log('空白行',this.blankLines);
    this.$emit('onPrintTable', this.$refs.print.innerHTML);
    if (this.isPreview) {
      this.fillInToDom();
    }
  }
};
</script>
